﻿@inject IDataCacheService _dataCacheService

@if (IsAnniversary)
{
    @if (Type == PlayedGamesDisplayType.LargeCard)
    {
        <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-4">
            <MDCard Class="h-100 pointer" Style="display: flex; flex-direction: column; justify-content: space-between;" OnClick="OnClick" ShowHoverStyle="true">
                <div class="">
                    <div class="">
                        <img class="img-fluid" src="@Model.GameImage" alt="@Model.GameName" crossOrigin="anonymous">
                    </div>
                    <div class="pa-3">
                        <div class="text-truncate-2 mb-2 title-large">@Model.GameName</div>
                        <div>
                            <GameRecordTagCard Model="Model" />
                        </div>
                        <div class="text-truncate-4  label-large"> @Model.GameBriefIntroduction</div>
                    </div>
                </div>
            </MDCard>
        </div>

    }
    else if (Type == PlayedGamesDisplayType.SmallCard)
    {
        @if (_dataCacheService.IsApp)
        {

            <div class="col-6 col-md-4 col-lg-3 col-xl-2  mb-4">
                <MDCard Class="h-100 pointer" OnClick="OnClick" ShowHoverStyle="true">
                    <div>
                        <img loading="lazy" src="@Model.GameImage" class="card-img-top" crossOrigin="anonymous" style="width: 100%;" alt="@Model.GameName" />
                    </div>
                    <div class="mb-2" style="padding: 0px; padding: 0px; padding-top: 0.5rem; padding-left: 0.4rem; padding-right: 0.4rem;">
                        <span style="font-size: 15px;" class="home-card-name-text">@Model.GameName</span>
                    </div>
                    <div>
                        <GameRecordTagCard Model="Model" />
                    </div>
                </MDCard>
            </div>
        }
        else
        {
            <div class="col-6 col-md-4 col-lg-3 col-xl-2  mb-4">
                <MDCard Class="h-100 pointer" OnClick="OnClick" ShowHoverStyle="true">
                    <img loading="lazy" src="@Model.GameImage" class="card-img-top" alt="@Model.GameName" crossOrigin="anonymous" />
                    <div class="pa-2 pb-1">
                        <span class="home-card-name-text">@Model.GameName</span>
                    </div>
                    <div class="ms-2 me-2">
                        <GameRecordTagCard Model="Model" />
                    </div>
                </MDCard>
            </div>

        }

    }
    else
    {
        @if (_dataCacheService.IsApp)
        {
            <div class="col-12  mb-4">
                <MDCard Class="h-100 pointer" OnClick="OnClick" ShowHoverStyle="true">
                    <div style="display: flex; align-items: center;">
                        <div>
                            <img loading="lazy" style=" width: 160px; " src="@Model.GameImage" crossOrigin="anonymous">
                        </div>
                        <div class="ms-2 me-2 w-100">
                            <span class="text-truncate-1">
                                <span class="fw-bold" style=" display: inline;">@Model.GameName</span>
                            </span>
                            <div>
                                <GameRecordTagCard Model="Model" />
                            </div>
                            <span class="text-truncate-2  label-large">@Model.GameBriefIntroduction</span>
                        </div>
                    </div>
                </MDCard>
            </div>


        }
        else
        {
            <div class="col-12  mb-4">

                <MDCard Class="h-100 pointer" OnClick="OnClick" ShowHoverStyle="true">

                    <div class="" style="display:flex;">
                        <div class="">
                            <img loading="lazy" style=" width: 285px; " src="@Model.GameImage" crossOrigin="anonymous">
                        </div>
                        <div class="pa-3" style=" width: 100%;">
                            <div class="text-truncate-1 mb-2 title-large">@Model.GameName</div>
                            <div class="mt-2">
                                <GameRecordTagCard Model="Model" />
                            </div>
                            <span class="text-truncate-2 label-large">@Model.GameBriefIntroduction</span>

                        </div>
                    </div>
                </MDCard>
            </div>
        }

    }
}
else
{
    <div class="col-6 col-md-6 col-lg-4 col-xl-3 mb-3">
        <MDCard Class=" h-100 pointer" Style="display: flex; flex-direction: column; justify-content: space-between;" OnClick="OnClick" ShowHoverStyle="true">
                <div style="display: flex;">
                    <img class="img-fluid" src="@Model.GameImage" alt="@Model.GameName">
                </div>
            <div class="pa-3 pb-1">
                    <div class="text-truncate-2 fw-bold mb-1">@Model.GameName</div>
                    <div>
                        <GameRecordTagCard Model="Model" />
                    </div>
                </div>
        </MDCard>
    </div>


}


@code {
    [Parameter]
    public GameRecordViewModel Model { get; set; }
    [Parameter]
    public EventCallback<GameRecordViewModel> OnShow { get; set; }
    [Parameter]
    public bool IsAnniversary { get; set; }
    [Parameter]
    public PlayedGamesDisplayType Type { get; set; }

    public async Task OnClick()
    {
        await OnShow.InvokeAsync(Model);
    }

}
